<template>
  <el-card shadow="never">
    <template #header>
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="6" :xs="24">
            <el-form-item label="订单编号">
              <el-input v-model="page.orderId"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="用户姓名">
              <el-input v-model="page.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="手机号码">
              <el-input v-model="page.phone"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="产品名称">
              <el-select style="width: 100%" v-model="page.productId" clearable filterable>
                <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                           :value="item.productId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" v-permiss="['search-institution']">
            <el-form-item label="机构名称">
              <el-select style="width: 100%" v-model="page.institutionId" clearable>
                <el-option v-for="item in institutionList" :key="item.name" :label="item.name"
                           :value="item.institutionId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="客户类型">
              <el-select style="width: 100%" v-model="page.customerType" clearable>
                <el-option :value="1" label="新客"></el-option>
                <el-option :value="2" label="老客"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="收费类型">
              <el-cascader
                  style="width: 100%"
                  v-model="type"
                  @change="feeTypeChange"
                  :options="typeSelect"
                  :props="{ checkStrictly: true,value:'id',label:'value' }"
                  clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="贷超APP">
              <el-select v-model="page.appId" style="width: 100%" clearable>
                <el-option v-for="item in loanProductList" :key="item.appId" :label="item.appName"
                           :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :xs="24">
            <el-form-item label="时间">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.timeValue"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getTableData">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <div style="text-align: left;line-height: 32px;margin-bottom: 10px">
      <span style="color: #409eff;font-size: 18px">消费总金额 : {{ totalNum }}</span>
    </div>
    <Table :tableColumn="tableColumn" :tableData="tableData" :page="page"
           @handleCurrentChange="(val)=>{page.pageNum = val,getTableData()}"
           @handleSizeChange="(val)=>{page.pageSize = val,getTableData()}"
    ></Table>
  </el-card>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {fetchTransactionList, fetchTransactionTotal} from '@/api/institution'
import {selectInstitution, fetchProductSelect, selectProductList} from "@/api";
import {dateFormatTimeStamp} from "@/utils";
import {formatMenuTree} from "@/utils/index";

const tableColumn = [
  {label: '贷超APP', prop: 'appName', align: 'center', minWidth: 100},
  {label: '订单编号', prop: 'orderId', align: 'center', minWidth: 150},
  {label: '用户姓名', prop: 'name', align: 'center', minWidth: 100},
  {label: '手机号码', prop: 'phone', align: 'center', minWidth: 100},
  {label: '产品名称', prop: 'productName', align: 'center', minWidth: 100},
  {label: '机构名称', prop: 'institutionName', align: 'center', minWidth: 100},
  {label: '客户类型', prop: 'customerType', align: 'center', minWidth: 100},
  {label: '收费类型', prop: 'type', align: 'center', minWidth: 100},
  {label: '收费阶段', prop: 'phase', align: 'center', minWidth: 100},
  {label: '消费金额', prop: 'amount', align: 'center', minWidth: 100},
  {label: '时间', prop: 'creationTime', align: 'center', minWidth: 150},
]
const typeSelect = [
  {key: 1, value: '订单计费', parentId: 0, id: 1},
  {key: 2, value: '运营商认证', parentId: 0, id: 2},
  {key: 1, value: '一推', parentId: 1, id: 3},
  {key: 2, value: '二推', parentId: 1, id: 4},
  {key: 3, value: '放款', parentId: 1, id: 5}
]
export default {
  name: "TransactionList",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      type: null,
      tableData: [],
      institutionList: [],
      productList: [],
      totalNum: 0,
      loanProductList: []
    })
    const methods = {
      async getTableData() {
        const [datetimeStart, datetimeEnd] = dateFormatTimeStamp(state.page.timeValue)
        const params = {
          ...state.page,
          datetimeStart, datetimeEnd
        }
        delete params.timeValue
        methods.getTotal(params)
        const res = await fetchTransactionList(params)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list.map(item => {
            const type = typeSelect.find(i => i.key === item.type)
            const phase = typeSelect.filter(_ => _.parentId !== 0).find(i => i.key === item.phase)
            item.type = type ? type.value : item.type
            item.phase = phase ? phase.value : item.phase
            item.customerType = item.customerType === 1 ? '新客' : '老客'
            return item
          })
          state.page.total = total
        }
      },
      async getInstitutionSelect() {
        const res = await selectInstitution()
        if (res.code === 200) {
          state.institutionList = res.data
        }
      },
      async getProductList() {
        const res = await fetchProductSelect()
        if (res.code === 200) {
          state.productList = res.data
        }
      },
      async getLoanProductList() {
        const res = await selectProductList()
        if (res.code === 200) {
          state.loanProductList = res.data
        }
      },
      async getTotal(params) {
        const res = await fetchTransactionTotal(params)
        if (res.code === 200) {
          state.totalNum = res.data
        }
      },
      feeTypeChange(value) {
        let arr = value || []
        const [key1, key2] = arr
        const select1 = typeSelect.find(item => item.id === key1)
        if (arr.length === 2) {
          const select2 = typeSelect.find(item => item.id === key2)
          state.page.type = select1.key
          state.page.phase = select2.key
        } else if (arr.length === 1) {
          state.page.type = select1.key
          state.page.phase = null
        } else {
          state.page.type = null
          state.page.phase = null
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        state.type = null
        methods.getTableData()
      }
    }
    onMounted(() => {
      methods.getTableData()
      methods.getProductList()
      methods.getLoanProductList()
      methods.getInstitutionSelect()
    })
    return {
      tableColumn,
      ...methods,
      typeSelect: formatMenuTree(typeSelect),
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>
